import React, { Component } from "react";
class Content extends Component {
    state = {
        list: [],
        arr: JSON.parse(localStorage.getItem("flower")) || [],
    };
    collect = (type) => {
        return (e) => {
            var m = this.state.list;
            for (var i = 0; i < m.length; i++) {
                if (m[i].plantID == type.plantID) {
                    m[i].mark = true;
                }
            }
            this.setState({ list: m });

            var obj = {};
            obj.name = type.name;
            obj.id = type.plantID;
            var starr = [obj, ...this.state.arr];

            if (starr.length > 1) {
                for (var j = 1; j < starr.length; j++) {
                    if (obj.id == starr[j].id) {
                        starr.shift(obj);
                    }
                }
            }

            this.setState({ arr: starr }, () => {
                localStorage.setItem("flower", JSON.stringify(this.state.arr));
            });
        };
    };
    unCollect = (data) => {
        return (e) => {
            this.setState(
                {
                    arr: this.state.arr.filter((val) => val.id != data.id),
                },
                () => {
                    localStorage.setItem(
                        "flower",
                        JSON.stringify(this.state.arr)
                    );
                }
            );

            var n = this.state.list;
            for (var i = 0; i < n.length; i++) {
                if (n[i].plantID == data.id) {
                    n[i].mark = false;
                }
            }
            this.setState({ list: n });
        };
    };
    componentDidMount() {
        fetch(
            "https://www.fastmock.site/mock/3c02a69b3952632e311022710cb48a6c/plant/getPlants"
        )
            .then((res) => res.json())
            .then((res) => {
                var brr = res.result.plantList;
                for (var i = 0; i < brr.length; i++) {
                    brr[i].mark = false;
                }
                this.setState({ list: brr });
            });
    }
    render() {
        const { list, arr } = this.state;
        return (
            <div className="container">
                <h1>收藏列表</h1>
                <ul>
                    {arr.map((i) => {
                        return (
                            <li
                                style={{
                                    listStyleType: "none",
                                }}
                                key={i.id}
                            >
                                <span
                                    style={{
                                        display: "inline-block",
                                        width: "100px",
                                    }}
                                >
                                    {i.name}
                                </span>
                                <button
                                    onClick={this.unCollect(i)}
                                    style={{ marginLeft: "300px" }}
                                >
                                    取消收藏
                                </button>
                            </li>
                        );
                    })}
                </ul>
                <h1>鲜花列表</h1>
                <ul
                    style={{
                        display: "flex",
                        width: "1200px",
                        height: "2000px",
                        flexDirection: "row",
                        flexWrap: "wrap",
                        justifyContent: "center",
                        alignItems: "center",
                    }}
                >
                    {list.map((item) => {
                        if (!item.area) {
                            item.area = "未知产地";
                        }

                        for (var i = 0; i < arr.length; i++) {
                            if (item.plantID === arr[i].id) {
                                item.mark = true;
                            }
                        }

                        return (
                            <li
                                style={{
                                    width: "180px",
                                    height: "300px",
                                    listStyleType: "none",
                                    marginTop: "-50px",
                                    marginLeft: "50px",
                                }}
                                key={item.plantID}
                            >
                                <img
                                    src={item.coverURL}
                                    alt="图片"
                                    style={{
                                        width: "100%",
                                        height: "60%",
                                    }}
                                />
                                <p>{item.name}</p>
                                <p
                                    style={{
                                        marginTop: "-10px",
                                        fontSize: "10px",
                                    }}
                                >
                                    {item.engName}
                                </p>
                                <p
                                    style={{
                                        marginTop: "-5px",
                                        fontSize: "12px",
                                    }}
                                >
                                    产地:{item.area}
                                </p>
                                <button onClick={this.collect(item)}>
                                    {item.mark == true ? "已收藏" : "收藏"}
                                </button>
                            </li>
                        );
                    })}
                </ul>
            </div>
        );
    }
}
export default Content;
